<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%  
	String path = request.getContextPath();  
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工职位</title>
<jsp:include page="/WEB-INF/backstage/util.jsp"/>
<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/demo.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">
<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery-1.4.4.min.js"></script> --%>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.excheck.js"></script>
	<SCRIPT type="text/javascript">
		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		var zNodes;
		$(function(){
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath }/zjj/selectMenu",
				success:function(zNodes){
					 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
				}
			})
		}); 
	</SCRIPT>
</head>
<!-- <body style="margin: 30px;"> -->
<body>
	<!-- <div class="container"> -->
		<center>
			<!-- 条件查询表单 -->
			<form class="form-inline" action="${pageContext.request.contextPath }/zjj/selectBis_shop_post" method="post" name="myform" id="myform">
				<table align="left">
					<tr>
						<td>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<div class="form-group">
								<label for="post_code">职位编码：</label>
							</div>
							<div class="form-group">
								<input type="text" class="form-control" id="post_code" name="post_code" value="${post_code }">
							</div>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<div class="form-group">
								<label for="post_name">职位名称：</label>
							</div>
							<div class="form-group">
								<input type="text" class="form-control" id="post_name" name="post_name" value="${post_name }">
							</div>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<!-- 表单按钮组 -->
							<button class="btn btn-primary btn-sm" type="submit" name="zjjinquiry" id="zjjinquiry">
								<span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;&nbsp;查询
							</button>
							&nbsp;&nbsp;
							<button class="btn btn-primary btn-sm" type="button" name="zjjresetting" id="zjjresetting">
								<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>&nbsp;&nbsp;重置
							</button>
						</td>
					</tr>
					<tr>
						<td>
							<button class="btn btn-primary btn-sm" type="button" name="zjjresetting" id="zjjresetting" data-toggle="modal" data-target="#myModal1" data-backdrop="static">
								<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;&nbsp;新增
							</button>
						</td>
					</tr>
				</table>
			</form>
			
			<!-- 新增模态框 -->
			<div class="modal fade bs-example-modal-lg" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			  <div class="modal-dialog modal-lg" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" onclick="test1()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" align="left">职位信息</h4>
			      </div>
			      <div class="modal-body">			      	
			      	<form class="form-horizontal" name="myform1" id="myform1">
			      		<div class="row">
			      			<div class="col-xs-12 col-sm-6 col-md-8 panel panel-info">
			      				<div class="panel-heading" align="left">
							  		职位信息
							    </div>
							    <table class="table table-bordered">
							    	<!-- 隐藏域 -->
					        		<!-- 职位编号 -->
					        		<input type="hidden" name="post_id" id="post_id" value=""></td>
					        		<!-- 职位编码 -->
					        		<input type="hidden" class="form-control" name="post_code" id="post_code2" value="">
						    		<!-- <tr>
						    			<td>
						    				<div class="form-group" align="left">
						    					<label for="post_code" class="col-sm-12 control-label">职位编码：</label>
						    				</div>
						    			</td>
						    			<td>
						    				<div class="form-group">
											    <div class="col-sm-12">
											      <input type="text" class="form-control" name="post_code" id="post_code2" value="">
											    </div>
										    </div>
						    			</td>
						    		</tr> -->
						    		<tr>
						    			<td>
						    				<div class="form-group">
						    					<label for="post_name" class="col-sm-12 control-label">职位名称：</label>
						    				</div>
						    			</td>
						    			<td>
						    				<div class="form-group">
											    <div class="col-sm-12">
											      <input type="text" class="form-control" name="post_name" id="post_name2" value="" >
											    </div>
										    </div>
						    			</td>
						    		</tr>
						    		<tr>
						    			<td>
						    				<div class="form-group">
						    					<label for="post_desc" class="col-sm-12 control-label">备注：</label>
						    				</div>
						    			</td>
						    			<td>
						    				<div class="form-group">
											    <div class="col-sm-12">
											    	<textarea rows="" cols="" class="form-control" name="post_desc" id="post_desc"></textarea>										      
											    </div>
										    </div>
						    			</td>
						    		</tr>
						    		<tr>
						    			<td colspan="2" align="center">
						    				<button type="button" class="btn btn-default" data-dismiss="modal" name="zjjclose" id="zjjclose">关闭</button>
											<button type="button" class="btn btn-primary" name="zjjpreserve1" id="zjjpreserve1">保存</button>
						    			</td>
						    		</tr>
							    </table>
			      			</div>
			      			<div class="col-xs-6 col-md-4 panel panel-info">
			      			<input type="hidden" name="array" id="array">
			      				<div class="panel-heading" align="left">
							  		授权菜单
							    </div>
							    <div class="zTreeDemoBackground left">
									<ul id="treeDemo" class="ztree"></ul>
								</div>
			      			</div>
			      		</div>				
					</form>
			      </div>
			    </div>
			  </div>
			</div>
			
			<!-- 显示数据 -->
			<table class="table table-bordered table-condensed table-hover">
				<tr align="center">
					<td></td>
					<td>职位编码</td>
					<td>职位名称</td>
					<td>备注</td>
					<td>更新时间</td>
					<td>修改</td>
					<td>删除</td>
				</tr>
				<c:forEach items="${info.list }" var="list" varStatus="s">
					<tr align="center" >
						<td>${s.index+1 }</td>
						<td>${list.post_code }</td>
						<td>${list.post_name }</td>
						<td>${list.post_desc }</td>
						<%-- <td>${list.modify_time }</td> --%>
						<td><f:formatDate value="${list.modify_time }" pattern="yyyy-MM-dd" /></td>
						<td>
							<button type="button" class="btn btn-primary btn-xs" onclick="aaa('${list.post_id }')" data-toggle="modal" data-target="#myModal1" data-backdrop="static">
								<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;&nbsp;修改
							</button>
						</td>
						<td>
							<button class="btn btn-primary btn-xs" type="button" onclick="test3('${list.post_id}')" data-toggle="modal" data-target="#myModal3" data-backdrop="static">
								<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>&nbsp;&nbsp;删除
							</button>
						</td>
					</tr>
				</c:forEach>
			</table>			
			
			<!-- 删除模态框 -->
			<div class="modal fade bs-example-modal-lg" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			  <div class="modal-dialog modal-lg" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" onclick="test222()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" align="left">确认</h4>
			      </div>
			      <div class="modal-body">			      	
			      	<form class="form-horizontal" name="myform3" id="myform3">
			      		<td colspan="3" ><input type="hidden" name="post_id" id="post_id2"></td>
			      		<div class="form-group"">
						  	<h3><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>&nbsp;&nbsp;你确定要删除该职位信息吗？</h3>
						</div>
						<div class="form-group"">
							<button type="button" class="btn btn-default" name="zjjdelete3" id="zjjdelete3">确定</button>
					        <button type="button" class="btn btn-default" data-dismiss="modal" name="zjjclose3" id="zjjclose3">取消</button>
					    </div>
					</form>
			      </div>
			    </div>
			  </div>
			</div>

			<!-- 分页 -->
			<a href="#" onclick="first()">首页</a>
			&nbsp;&nbsp;&nbsp;
			<a href="#" onclick="pre()">上一页</a>
			&nbsp;&nbsp;&nbsp;
			<a href="#" onclick="next()">下一页</a>
			&nbsp;&nbsp;&nbsp;
			<a href="#" onclick="last()">尾页</a>
		</center>
	<!-- </div> -->
</body>
</html>
<script type="text/javascript">
	//分页
	//首页
	function first(){
		document.forms[0].action="${pageContext.request.contextPath }/zjj/selectBis_shop_post?page=${info.firstPage}";
		document.forms[0].submit();lase
	}
	//上一页
	function pre(){
		document.forms[0].action="${pageContext.request.contextPath }/zjj/selectBis_shop_post?page=${info.prePage}";
		document.forms[0].submit();
	}
	//下一页
	function next(){
		document.forms[0].action="${pageContext.request.contextPath }/zjj/selectBis_shop_post?page=${info.nextPage}";
		document.forms[0].submit();
	}
	//尾页
	function last(){
		document.forms[0].action="${pageContext.request.contextPath }/zjj/selectBis_shop_post?page=${info.lastPage}";
		document.forms[0].submit();
	}
	
	//点击重置按钮 重置
	$("#zjjresetting").click(
		function() {
			$("#post_code").val("");
			$("#post_name").val("");
		}
	);
	
	//点击模态框 关闭按钮 刷新当前界面
	//添加
	$("#zjjclose").click(
		function() {
			console.log("---");
			window.location.href = "${pageContext.request.contextPath }/zjj/selectBis_shop_post";
	});
	//删除
	$("#zjjclose3").click(
		function() {
			console.log("---");
			window.location.href = "${pageContext.request.contextPath }/zjj/selectBis_shop_post";
	});
	
	//点击模态框关闭图标 关闭模态框 刷新当前页面
	//添加
	function test1 () {
        console.log('----');
        window.location.href = "${pageContext.request.contextPath }/zjj/selectBis_shop_post";
    }
	//删除
	function test222 () {
        console.log('----');
        window.location.href = "${pageContext.request.contextPath }/zjj/selectBis_shop_post";
    }
	
	//点击删除按钮 将当前行数据ID传值到模态框 并打开模态框
	function test3 (post_id) {
		console.log("----");
		$("#post_id2").val(post_id);
    }
	//删除
	//点击确定按钮 提交表单 删除
	$("#zjjdelete3").click(
		function() {
			console.log("删除");
			$.ajax({
				type : "POST",
				url : "${pageContext.request.contextPath }/zjj/deleteBis_shop_post",
				data:{"post_id":$("#post_id2").val()},
				success : function(result) {
					//由于ajax发送的url到控制层不会进行页面的跳转，因为当请求成功以后，请求依然会回success,所以可以在此再写一遍url进行跳转
					window.location.href = "${pageContext.request.contextPath }/zjj/selectBis_shop_post";
				}
			});
	});
	//点击删除按钮 删除该员工 没有弹出模态框 只是提示用户是否删除
	/* function test3 (post_id) {
        console.log(post_id);
        if(window.confirm("你确定要删除该职位信息吗~！")) {
			$.ajax({
				type : "POST",
				url : "${pageContext.request.contextPath }/zjj/deleteBis_shop_post",
				data : {"post_id":post_id},
				success : function(result) {
					//由于ajax发送的url到控制层不会进行页面的跳转，因为当请求成功以后，请求依然会回success,所以可以在此再写一遍url进行跳转
					window.location.href = "${pageContext.request.contextPath }/zjj/selectBis_shop_post";
				}
			});
		}
    } */
	
	//点击修改按钮 将当前行数据ID传递到模态框
	function aaa(post_id) {
		$.ajax({
    		url:'${pageContext.request.contextPath }/zjj/findByIdBis_shop_post',
    		type:'post',
    		data:{"post_id":post_id},
    		success:function(msg){
			 	var ms=eval('('+msg+')');
			 	$("#post_id").val(ms.post_id);
			 	$("#post_code2").val(ms.post_code);
        		$("#post_name2").val(ms.post_name);
        		$("#post_desc").val(ms.post_desc);
        		 $.ajax({
    				type:"post",
    				url:"${pageContext.request.contextPath }/zjj/selectMenu2",
    				data:{"post_id":post_id},
    				success:function(zNodes){
    					 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    				}
    			}); 
    		}
    	});
    }
    //以下是后台不需要自定义方法的写法
    /* function test2 (post_id) {
    	console.log("----");
        $.ajax({
    		url:'${pageContext.request.contextPath }/zjj/findByIdBis_shop_post',
    		type:'post',
    		data:{"post_id":post_id},
    		dataType: 'json',
    		success:function(msg){
    			console.log(msg);
    			//var ms=eval('('+msg+')');
    		 	$("#post_id1").val(msg.post_id);
    		 	$("#post_code1").val(msg.post_code);
        		$("#post_name1").val(msg.post_name);
        		$("#post_desc1").val(msg.post_desc);
    		}
    	});
    } */
    
    <%-- $("#zjjpreserve1").click(
			function() {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				var nodes=zTree.getCheckedNodes();  //获取复选框改变的值
				var array=[];
				$.each(nodes,function(index,n){
					array.push(n.id);
				});
				var data=array.join(",");
				$("#array").val(data);
				if(window.confirm("是否保存添加~！")) {
					$.ajax({
			            type:"POST",
			            url:"${pageContext.request.contextPath }/zjj/insertBis_shop_post",
			            data : $("#myform1").serialize(),
		                success: function (result) {
		                    //由于ajax发送的url到控制层不会进行页面的跳转，因为当请求成功以后，请求依然会回success,所以可以在此再写一遍url进行跳转
		                    window.location.href="${pageContext.request.contextPath }/zjj/selectBis_shop_post";
		                }
			        });
				}
			}		
		); --%>
	
	//开始新增表单验证
	var form1 = $('#myform1');
	$(document).ready(function() {
		form1.bootstrapValidator({
			message: '输入值不合法',
			feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			fields: {
				/* post_code: {
					message: '职位编码不合法',
					validators: {
						notEmpty: {
							message: '职位编码不能为空'
						},
						stringLength: {
							min: 2,
							max: 16,
							message: '请输入2到16个字符'
						},
						regexp: {
							regexp: /^[A-Za-z0-9]+$/,
							message: '职位编码只能由字母、数字组成'
						}
					}
				}, */
				post_name: {
					message: '职位名称不合法',
					validators: {
						notEmpty: {
							message: '职位名称不能为空'
						},
						stringLength: {
							min: 2,
							max: 30,
							message: '请输入2到30个字符'
						},
						regexp: {
							regexp: /[\u4e00-\u9fa5]/,
							message: '职位名称只能由中文字符组成 '
						}
					}
				},
				post_desc: {
					validators: {
						notEmpty: {
							message: '备注不能为空'
						}
					}
				},
			}
		});
		
		//点击保存按钮进行 表单验证 
		//验证成功 提交表单 刷新界面
		$("#zjjpreserve1").click(
			function() {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				var nodes=zTree.getCheckedNodes();  //获取复选框改变的值
				var array=[];
				$.each(nodes,function(index,n){
					array.push(n.id);
				});
				var data=array.join(",");
				$("#array").val(data);
				//alert($("#array").val(data));
				//进行表单验证
				var bv = form1.data('bootstrapValidator');
				bv.validate();
				if(bv.isValid()) {
					//console.log("+++");
					if(window.confirm("是否保存该条数据~！")) {
						$.ajax({
				            type:"POST",
				            url:"${pageContext.request.contextPath }/zjj/insertBis_shop_post",
				            data : $("#myform1").serialize(),
			                success: function (result) {
			                    //由于ajax发送的url到控制层不会进行页面的跳转，因为当请求成功以后，请求依然会回success,所以可以在此再写一遍url进行跳转
			                    window.location.href="${pageContext.request.contextPath }/zjj/selectBis_shop_post";
			                }
				        });
					}
				}
			}		
		);
		
		<%-- $("#zjjpreserve1").click(
				function() {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					var nodes=zTree.getCheckedNodes();  //获取复选框改变的值
					var array=[];
					$.each(nodes,function(index,n){
						array.push(n.id);
					});
					var data=array.join(",");
					$("#array").val(data);
					if(window.confirm("是否保存添加~！")) {
						$.ajax({
				            type:"POST",
				            url:"${pageContext.request.contextPath }/zjj/insertBis_shop_post",
				            data : $("#myform1").serialize(),
			                success: function (result) {
			                    //由于ajax发送的url到控制层不会进行页面的跳转，因为当请求成功以后，请求依然会回success,所以可以在此再写一遍url进行跳转
			                    window.location.href="${pageContext.request.contextPath }/zjj/selectBis_shop_post";
			                }
				        });
					}
				}		
			); --%>
		
	});
	//新增表单验证结束
	
	<%-- //开始修改表单验证
	var form2 = $('#myform2');
	$(document).ready(function() {
		form2.bootstrapValidator({
			message: '输入值不合法',
			feedbackIcons: {
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			fields: {
				post_code: {
					message: '职位编码不合法',
					validators: {
						notEmpty: {
							message: '职位编码不能为空'
						},
						stringLength: {
							min: 2,
							max: 16,
							message: '请输入2到16个字符'
						},
						regexp: {
							regexp: /^[A-Za-z0-9]+$/,
							message: '职位编码只能由字母、数字组成'
						}
					}
				},
				post_name: {
					message: '职位名称不合法',
					validators: {
						notEmpty: {
							message: '职位名称不能为空'
						},
						stringLength: {
							min: 2,
							max: 30,
							message: '请输入2到30个字符'
						},
						regexp: {
							regexp: /[\u4e00-\u9fa5]/,
							message: '职位名称只能由中文字符组成 '
						}
					}
				},
				post_desc: {
					validators: {
						notEmpty: {
							message: '备注不能为空'
						}
					}
				},
			}
		});
		
		//点击保存按钮进行 表单验证 
		//验证成功 提交表单 刷新界面
		$("#zjjpreserve2").click(
			function() {
				console.log("---");
				//进行表单验证
				var bv = form2.data('bootstrapValidator');
				bv.validate();
				if(bv.isValid()) {
					console.log("+++");
					if(window.confirm("是否保存修改~！")) {
						$.ajax({
				            type:"POST",
				            url:"${pageContext.request.contextPath }/zjj/updateBis_shop_post",
				            data : $("#myform2").serialize(),
			                success: function (result) {
			                    //由于ajax发送的url到控制层不会进行页面的跳转，因为当请求成功以后，请求依然会回success,所以可以在此再写一遍url进行跳转
			                    window.location.href="${pageContext.request.contextPath }/zjj/selectBis_shop_post";
			                }
				        });
					}
				}
			}		
		);
		
	});
	//修改表单验证结束 --%>
</script>